<template>
  <div class="feature-item" @click="onClick">
    <div class="feature-icon" :style="{ backgroundColor: iconBgColor }">
      <van-icon :name="icon" :color="iconColor" size="20" />
    </div>
    <div class="feature-content">
      <div class="feature-title">{{ title }}</div>
      <div v-if="description" class="feature-description">{{ description }}</div>
    </div>
    <div class="feature-arrow">
      <van-icon name="arrow" />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: 'setting-o'
  },
  iconColor: {
    type: String,
    default: '#fff'
  },
  iconBgColor: {
    type: String,
    default: 'var(--primary-color)'
  },
  to: {
    type: [String, Object],
    default: ''
  }
})

const emit = defineEmits(['click'])
const router = useRouter()

const onClick = () => {
  emit('click')
  
  if (props.to) {
    router.push(props.to)
  }
}
</script>

<style lang="scss" scoped>
.feature-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: var(--background-color-light);
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: var(--box-shadow);
  cursor: pointer;
  
  &:active {
    opacity: 0.8;
  }
  
  .feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 12px;
    flex-shrink: 0;
  }
  
  .feature-content {
    flex: 1;
    overflow: hidden;
    
    .feature-title {
      font-size: 16px;
      font-weight: 500;
      color: var(--text-color);
      margin-bottom: 4px;
    }
    
    .feature-description {
      font-size: 12px;
      color: var(--text-color-tertiary);
    }
  }
  
  .feature-arrow {
    margin-left: 8px;
    color: var(--text-color-tertiary);
  }
}
</style> 